<template>
  <div class="article_preview">
    <section class="el-menu__header largeSize">
      <div v-if="currentType===1 || currentType===4 ||currentType===7" class="articleContent">
        <h2>{{ articleContent.title }}</h2>
        <p class="auther">{{ articleContent.author }}</p>
        <p class="time">{{ articleContent.releaseTime }}</p>
        <div
          id="content"
          ref="articleContent"
          :class="{ 'article-content-wrap-zh': lan === 'zh-Hans' }"
          class="ql-editor article-content-wrap" />
      </div>

     
      <div v-if="currentType===2" class="atlasContent">
        <h2>{{ atlasContent.title }}</h2>
        <p class="time">{{ atlasContent.releaseTime }}</p>
        <swiper>
          <swiper-item v-for="item in atlasContent.galleryImages" :key="item.id">
            <div class="gallery_text">{{ item.description }}</div>
            <img :src="item.imageUrl" width="100%" >
          </swiper-item>
        </swiper>
      </div>

      <div v-if="currentType===6" class="adContent">
        <iframe :src="adLink" frameborder="0"/>
      </div>
      <h3 v-if="currentType===-1">{{ errorMsg }}</h3>

      <!-- 微头条预览 currentType==100 || 5 -->
      <div v-if="currentType===100 || currentType===5" class="articleContent ">
        <p class="auther">{{ articleContent.author ? articleContent.author : articleContent.nickName }}</p>
        <p class="time">{{ articleContent.releaseTime }}</p>
        <div id="content" class="ql-editor" v-html="articleContent.description"/>
        <div id="content" class="ql-editor">
          <img v-for="(item, index) in articleContent.thumbsList" :key="index" :src="item" alt="">
        </div>
      </div>
    </section>
  
    <div v-if="currentType===1" class="footer-tip">
      {{ $t('Some_videos_may_not_play_because_of_different_format_encoding') }}
    </div>
  </div>
</template>
<script>
import {
  getArticlePreview,
  getGalleryPreview,
  getAdvertisementPreview,
  getCustomPreview,
  dynamicsPreview
} from '@/api/preview.js';
import { parseTime } from '@/utils/index.js';
import Swiper from './Swiper.vue';
import SwiperItem from './SwiperItem.vue';

// 编辑器样式
import '@/styles/editor.css';

export default {
  name: 'ArticlePreview',
  components: { Swiper, SwiperItem },
  props: {
    newsType: {
      type: Number,
      required: true
    },

    lan: {
      type: String,
      default: ''
    },

    newsId: {
      type: [Number, String],
      default: null
    },
 
    resources: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  
  data() {
    return {
      currentType: this.newsType,
      errorMsg: '',
      articleContent: {}, // 图文+小说
      atlasContent: {}, // 图集
      adLink: '' // 推广
    };
  },

  watch: {
    articleContent: {
      handler: 'appendArticleContent',
      immediate: true
    }
  },
  created() {
    if (this.newsId === '') {
      if (JSON.stringify(this.resources) == '{}') {
        this.errorMsg = this.$t(
          'Cannot_find_information_source_cannot_preview'
        );
        this.currentType = -1;
        return false;
      } else {
        if (
          this.currentType === 1 ||
          this.currentType === 4 ||
          this.currentType === 7 ||
          this.currentType === 100 ||
          this.currentType === 5
        ) {
          this.articleContent = this.resources;
        } else if (this.currentType === 2) {
          this.atlasContent = this.resources;
        } else if (this.currentType === 6) {
          this.adLink = this.resources.adLink;
        }
      }
    } else {
      // 资讯Id不为空；
      const newsId = this.newsId;
      if (this.currentType === 1 || this.currentType === 4) {
        // 获取图文小说
        getArticlePreview({ newsId }).then(result => {
          if (result.state === 1) {
            this.articleContent = result.result;
            this.articleContent.releaseTime = result.result.releaseTime ? parseTime(result.result.releaseTime) : '';
          } else {
            this.errorMsg = result.error_msg;
            this.currentType = -1;
          }
        });
      } else if (this.currentType === 2) {
        // 图集
        getGalleryPreview({ newsId }).then(result => {
          if (result.state === 1) {
            this.atlasContent = result.result;
            this.articleContent.releaseTime = result.result.releaseTime ? parseTime(result.result.releaseTime) : '';
          } else {
            this.errorMsg = result.error_msg;
            this.currentType = -1;
          }
        });
      } else if (this.currentType === 6) {
        // 推广
        getAdvertisementPreview({ newsId }).then(result => {
          if (result.state === 1) {
            this.adLink = result.result;
          } else {
            this.errorMsg = result.error_msg;
            this.currentType = -1;
          }
        });
      } else if (this.currentType === 7) {
        // 制定资讯预览
        getCustomPreview({ newsId }).then(result => {
          if (result.state === 1) {
            this.articleContent = result.result;
            this.articleContent.releaseTime = result.result.releaseTime ? parseTime(result.result.releaseTime) : '';
          } else {
            this.errorMsg = result.error_msg;
            this.currentType = -1;
          }
        });
      } else if (this.currentType === 100 || this.currentType === 5) {
          // 获取微头条
          dynamicsPreview({ id: newsId }).then(result => {
            if (result.state === 1) {
              this.articleContent = result.result;
              this.articleContent.releaseTime = result.result.releaseTime ? parseTime(result.result.releaseTime) : '';
              this.articleContent.thumbsList = result.result.thumbs ? result.result.thumbs.split(';') : [];
            } else {
              this.errorMsg = result.error_msg;
              this.currentType = -1;
            }
          });
      } else {
        this.currentType = -1;
        return false;
      }
    }
  },
  mounted() {
    if (this.newsType === 1) {
      // 监听富文本定制链接点击事件
      document.getElementById('content').onclick = e => {
        const nodePath = e.path.filter(
          item =>
            item.nodeName !== undefined && item.nodeName.toLowerCase() === 'a'
        );
        if (nodePath.length === 1) {
          e.preventDefault();
          this.$message({
            message: this.$t('Preview_in_App_after_publish'),
            type: 'info'
          });
        }
      };
    }
  },

  methods: {
    // render html and execute script
    appendArticleContent(article) {
      if (article && article.content) {
        const container = document.createElement('div');
        container.innerHTML = article.content;
        container.style.width = '100%';
        const $content = this.$refs.articleContent;
        if ($content.children.length) {
          $content.innerHTML = '';
        }
        $content.appendChild(container);
        // append script
        const scripts = container.getElementsByTagName('script');
        Array.prototype.forEach.call(scripts, ref => {
          const script = document.createElement('script');
          script.innerHTML = ref.innerHTML;
          const attrs = ref.attributes;
          for (let i = 0; i < attrs.length; i += 1) {
            const attr = attrs[i];
            script.setAttribute(attr.name, attr.value);
          }
          ref.parentElement.insertBefore(script, ref);
          ref.remove();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.largeSize {
  $width: 414px;
  $padding: 5px;
  width: $width;
  height: 736px;
  margin: 0 auto;
  padding: 0px $padding;
  overflow-x: hidden;
  overflow-y: auto;
  .atlasContent {
    width: $width - $padding * 2;
  }
}

#content /deep/ img {
  width: 100% !important;
}

#content /deep/ a {
  color: #409eff;
  text-decoration: underline;
}

.atlasContent {
  text-align: center;
}

.defalutSize {
  $width: 414px;
  $padding: 5px;
  width: $width;
  margin: 0 auto;
  padding: 0px $padding;
  overflow-x: hidden;
  overflow-y: auto;

  .atlasContent {
    width: $width - $padding * 2;
  }
}

.el-carousel__item div {
  color: #ffffff;
  font-size: 14px;
  opacity: 0.85;
  line-height: 16px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #909399;
}

.adContent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  & iframe {
    width: 100%;
    height: 100%;
  }
}

.footer-tip {
  width: 100%;
  height: 46px;
  background-color: #e4e7ed;
  color: #909399;
  opacity: 0.7;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 10px 31px 0px;
  vertical-align: middle;
}

.gallery_text {
  padding: 20px;
  text-align: left;
}

.article_preview .articleContent /deep/ {
  @import '@/styles/news_detail.scss';
  @include news-detail;
}
</style>
